<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<c:import url="/WEB-INF/jsp/head.jsp"/>
	<script type="text/javascript" src="<c:url value="/js/md5.js" />"></script>
</head>
<body>

	<c:import url="/WEB-INF/jsp/cabecalho.jsp"/>
	
	<h3 align="center">Cadastro de Usuário</h3>
	
	<form method="post" action="<c:url value="/usuario/salvar"/>" name="form1">
	
		<c:if test="${not empty errors}">
			<div id="erros" style="color:red" class="erros">
				Foram encontrados erros no cadastro:<br/>
				<ul>
				<c:forEach var="error" items="${errors}">
				    <li>${error.message}</li>
				</c:forEach>
				</ul>
			</div>
		</c:if>
	
		<table align="center" width="100%" border="0">
			<tr>
				<td width="50%" align="right">Username:</td>
				<td width="10"></td>
				<td width="50%" align="left"><input type="text" name="usuario.username" id="usuarioUsername" value="${usuario.username}" style="width:400px" maxlength="20" /></td>
			</tr>
			<tr>
				<td width="50%" align="right">Senha:</td>
				<td width="10"></td>
				<td width="50%" align="left">
					<input type="password" id="usuarioSenha" value="" style="width:400px" maxlength="10" />
					<input type="hidden" name="usuario.senha" id="usuarioSenhaReal" />
				</td>
			</tr>
			<tr>
				<td width="50%" align="right">Confirmação da Senha:</td>
				<td width="10"></td>
				<td width="50%" align="left"><input type="password" id="usuarioConfirmacao" value="" style="width:400px" maxlength="10" /></td>
			</tr>
			<tr>
				<td width="50%" align="right">Papel</td>
				<td width="10"></td>
				<td width="50%" align="left">
					<select name="papel.papel" id="papel" >
					<c:forEach items="${papeis}" var="papel" >
						<option value="${papel.papel}">${papel.descricao}</option>
					</c:forEach>
					</select>
				</td>
			</tr>
		</table>
		
		<br /><br />
		
		<div align="center">
			<input type="button" name="btnEnviar" id="btnEnviar" value="Enviar" onclick="enviar()" />
			<input type="reset" name="btnLimpar" id="btnLimpar" value="Limpar" />
		</div>
	</form>
	
	<div align="center">
		<br /><br /><br />
		<a href="<c:url value="/usuario"/>">Voltar</a>
	</div>
	
	<c:import url="/WEB-INF/jsp/rodape.jsp"/>
<script type="text/javascript">
	function enviar(){
		var senha = document.getElementById('usuarioSenha').value;
		var confirmacao = document.getElementById('usuarioConfirmacao').value;
		var username = document.getElementById('usuarioUsername').value;
		if(username.length == 0 || senha.length == 0){
			alert("Dados não preenchidos corretamente.");
		}else if(senha != confirmacao){
			alert("A senha está diferente da confirmação de senha.");
		}else{
			document.getElementById('usuarioSenhaReal').value = hex_md5(senha);
			document.getElementById('usuarioSenha').value = "";
			document.getElementById('usuarioConfirmacao').value = "";
			document.form1.submit();
		}
	}
	<c:if test="${not empty usuario}">
		<c:forEach items="${usuario.papels}" var="papel">
			document.getElementById('papel').value = '${papel.papel}';
		</c:forEach>
	</c:if>	
</script>
</body>
</html>